<div class="monitor-tab-div">	
	<!-- 基本信息 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>基本信息</span>
		</div>
		<div class="m-panel-body base-info-div">
			<form class="bs-example form-horizontal xs-form">
	            <div id="base_info_monitor_div">
	            	<div class="form-group">
	                    <label class="col-lg-2 control-label">监控器名称：</label>
	                    <label class="col-lg-4 control-label tl" data-id="monitorName"></label>
	                    <label class="col-lg-2 control-label">监控器类型：</label>
	                    <label class="col-lg-4 control-label tl" data-id="monitorType"></label>
	                </div>
	            </div>
	            <div id="base_info_asset_div">
		            <div class="form-group" style="height:0;padding:0"></div>
		            <div class="form-group">
		                <label class="col-lg-2 control-label">被监控资产名称：</label>
		                <label class="col-lg-4 control-label tl" data-id="assetName"></label>
		                <label class="col-lg-2 control-label">资产类型：</label>
		                <label class="col-lg-4 control-label tl" data-id="assetTypeName"></label>
		            </div>

		            <div class="form-group">
		                <label class="col-lg-2 control-label">IP：</label>
		                <label class="col-lg-4 control-label tl" data-id="mainIp"></label>
		                <label class="col-lg-2 control-label">管控域：</label>
		                <label class="col-lg-4 control-label tl" data-id="securityDomainName"></label>
		            </div>

		            <div class="form-group">
		                <label class="col-lg-2 control-label">操作系统：</label>
		                <label class="col-lg-4 control-label tl" data-id="osTypeName"></label>
		                <label class="col-lg-2 control-label" style="display: none;">物理位置：</label>
		                <label class="col-lg-4 control-label tl" data-id="locationCbName" style="display: none;"></label>
		            </div>
	            </div>
	        </form>
	    </div>
	</div>

	<div class="m-panel">
		<div class="m-panel-title">
			<span>数据库信息</span>
		</div>
		<div class="m-panel-body base-info-div">
			<form class="bs-example form-horizontal xs-form">
				<div id="data_base_info_div">
					<div class="form-group">
		                <label class="col-lg-2 control-label">数据库名称：</label>
		                <label class="col-lg-4 control-label tl" data-id="dbName"></label>
		                <label class="col-lg-2 control-label">数据路径：</label>
		                <label class="col-lg-4 control-label tl" data-id="dataPath"></label>
		            </div>

		            <div class="form-group">
		                <label class="col-lg-2 control-label">基本目录：</label>
		                <label class="col-lg-4 control-label tl" data-id="baseDir"></label>
		                <label class="col-lg-2 control-label">数据库版本：</label>
		                <label class="col-lg-4 control-label tl" data-id="version2"></label>
		            </div>


		            <div class="form-group">
		                <label class="col-lg-2 control-label" >字符集：</label>
		                <label class="col-lg-4 control-label tl" data-id="charset"></label>
		                <label class="col-lg-2 control-label">配置的临时表大小（B）：</label>
		                <label class="col-lg-4 control-label tl" data-id="tmpTableSize"></label>
		            </div>

		            <div class="form-group">
		                <label class="col-lg-2 control-label">临时表目录：</label>
		                <label class="col-lg-4 control-label tl" data-id="tmpdir"></label>
		                <label class="col-lg-2 control-label">获取时间：</label>
		                <label class="col-lg-4 control-label tl" data-id="updateDateS"></label>
		            </div>
		        </div>
			</form>
		</div>
	</div>

	<div class="m-panel">
		<div class="m-panel-title">
			<span>数据表信息</span>
		</div>
		<div class="m-panel-sel">
			<div>数据库表：</div>
			<div>
				<select class="form-control input-sm" data-type="select" id="database_sel"></select>
			</div>
		</div>
		<div class="m-panel-body" id="data_base_div">
			<div class="m-panel-body-card" style="display:none">
				<ul>
					<li class="active" data-action="data_base_list">数据库</li>
				</ul>
			</div>
			<div class="table-div" id="data_base_list_div" style="height:300px"></div>
		</div>
	</div>

	<!-- Mysql信息 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>Mysql信息</span>
		</div>
		<div class="m-panel-body base-info-div">
			<div class="m-panel-body-card" id="mysql_info_div">
				<ul>
					<li class="active" data-action="thread_info_list">Mysql线程信息</li>
					<li data-action="cache_info_list">Mysql缓存信息</li>
					<li data-action="count_info_list">Mysql计数器信息</li>
					<li data-action="page_info_list">Mysql页信息</li>
					<li data-action="lock_info_list">Mysql锁信息</li>
				</ul>
			</div>
			<div style="min-height:260px">
				<form class="bs-example form-horizontal xs-form">
					<div id="thread_info_div">
						<div class="form-group">
			                <label class="col-lg-3 control-label">缓存中的线程数：</label>
			                <label class="col-lg-3 control-label tl" data-id="threadCached"></label>
			                <label class="col-lg-3 control-label">为处理远程连接请求创建的线程数：</label>
			                <label class="col-lg-3 control-label tl" data-id="threadCreated"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">当前打开的连接数：</label>
			                <label class="col-lg-3 control-label tl" data-id="threadsConnected"></label>
			                <label class="col-lg-3 control-label">处于非休眠状态的线程数：</label>
			                <label class="col-lg-3 control-label tl" data-id="threadsRunning"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">获取时间：</label>
			                <label class="col-lg-3 control-label tl" data-id="updateDateTd"></label>
			                <label class="col-lg-3 control-label"></label>
			                <label class="col-lg-3 control-label tl" data-id=""></label>
			            </div>
					</div>
					<div id="cache_info_div" style="display: none;">
						<div class="form-group">
			                <label class="col-lg-3 control-label">临时文件数目：</label>
			                <label class="col-lg-3 control-label tl" data-id="createdTmpFile"></label>
			                <label class="col-lg-3 control-label">临时表数目：</label>
			                <label class="col-lg-3 control-label tl" data-id="createdTmpTables"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">查询缓存中空闲内存块数量：</label>
			                <label class="col-lg-3 control-label tl" data-id="qcacheFreeBlocks"></label>
			                <label class="col-lg-3 control-label" id="qcacheFreeMemory">查询缓存中空闲内存数量：</label>
			                <label class="col-lg-3 control-label tl" data-id="qcacheFreeMemory"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">查询缓存的请求命中率（%）：</label>
			                <label class="col-lg-3 control-label tl" data-id="qcacheHits"></label>
			                <label class="col-lg-3 control-label">查询缓存中删除的查询数量：</label>
			                <label class="col-lg-3 control-label tl" data-id="qcacheInserts"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">低内存从查询缓存删除的查询数量：</label>
			                <label class="col-lg-3 control-label tl" data-id="qcacheLowmemPrunes"></label>
			                <label class="col-lg-3 control-label">注册在查询缓存中查询请求数量：</label>
			                <label class="col-lg-3 control-label tl" data-id="qcacheQueryInCached"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">查询缓存中块的总数目：</label>
			                <label class="col-lg-3 control-label tl" data-id="qcacheTotalBlocks"></label>
			                <label class="col-lg-3 control-label" id="memsize">使用内存大小：</label>
			                <label class="col-lg-3 control-label tl" data-id="memsize"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">打开表的数量：</label>
			                <label class="col-lg-3 control-label tl" data-id="openTables"></label>
			                <label class="col-lg-3 control-label">打开过表的数量：</label>
			                <label class="col-lg-3 control-label tl" data-id="openedTables"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">表缓存配置数：</label>
			                <label class="col-lg-3 control-label tl" data-id="tableCache"></label>
			                <label class="col-lg-3 control-label">获取时间：</label>
			                <label class="col-lg-3 control-label tl" data-id="updateDateQ"></label>
			            </div>
					</div>
					<div id="count_info_div" style="display: none;">
						<div class="form-group">
			                <label class="col-lg-3 control-label">打开连接数：</label>
			                <label class="col-lg-3 control-label tl" data-id="currentConn"></label>
			                <label class="col-lg-3 control-label">中断连接数：</label>
			                <label class="col-lg-3 control-label tl" data-id="interruptConn"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">试图连接数：</label>
			                <label class="col-lg-3 control-label tl" data-id="attemptConn"></label>
			                <label class="col-lg-3 control-label">回滚数：</label>
			                <label class="col-lg-3 control-label tl" data-id="rollbacks"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">获取时间：</label>
			                <label class="col-lg-3 control-label tl" data-id="updateDate"></label>
			                <label class="col-lg-3 control-label"></label>
			                <label class="col-lg-3 control-label tl" data-id=""></label>
			            </div>
					</div>
					<div id="page_info_div" style="display: none;">
						<div class="form-group">
			                <label class="col-lg-3 control-label">包含数据的页数量：</label>
			                <label class="col-lg-3 control-label tl" data-id="pagesData"></label>
			                <label class="col-lg-3 control-label">脏页数目：</label>
			                <label class="col-lg-3 control-label tl" data-id="pagesDirty"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">缓冲池中页刷新请求数目：</label>
			                <label class="col-lg-3 control-label tl" data-id="pagesFlushed"></label>
			                <label class="col-lg-3 control-label">空闲页的数量：</label>
			                <label class="col-lg-3 control-label tl" data-id="pagesFree"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label" id="pagesTotal">页缓冲池的大小：</label>
			                <label class="col-lg-3 control-label tl" data-id="pagesTotal"></label>
			                <label class="col-lg-3 control-label" id="pageSizeLock">页的大小：</label>
			                <label class="col-lg-3 control-label tl" data-id="pageSizeLock"></label>
			            </div>
					</div>
					<div id="lock_info_div" style="display: none;">
						<div class="form-group">
			                <label class="col-lg-3 control-label">当前被等待的行锁的数量：</label>
			                <label class="col-lg-3 control-label tl" data-id="rowLockCurrentWaits"></label>
			                <label class="col-lg-3 control-label">共计消耗在获取行锁上的时间（s）：</label>
			                <label class="col-lg-3 control-label tl" data-id="rowLockTime"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">为获取行锁平均等待时间（s）：</label>
			                <label class="col-lg-3 control-label tl" data-id="rowLockTimeAvg"></label>
			                <label class="col-lg-3 control-label">获取时间：</label>
			                <label class="col-lg-3 control-label tl" data-id="updateDatePL"></label>
			            </div>

			            <div id="lock_chart" class="monitor-chart w-all" style="height:210px;margin-top:20px"></div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="monitor-tab-div" data-type="event"></div>

<script type="text/javascript">

$(document).ready(function (){
require([index_web_app_name + '/js/plugin/monitor/catagory/mysql.js',
	index_web_app_name + '/js/plugin/plot/plot.js'] ,function (mysql ,plot){

var urlParamObj = index_query_param_get()

view_init()

event_init()

index_form_init($("body"))

function view_init()
{
    urlParamObj.time = $("#query_time_label").text()
    urlParamObj.inputTime = $("#query_time_label").text()
    urlParamObj.edId = urlParamObj.assetId
    urlParamObj.instStatus = 0
    mysql.base_info(urlParamObj)
    mysql.mysql_info(urlParamObj)
    mysql.instance_sel(urlParamObj)
    mysql_info_change()
    mysql.lock_chart(urlParamObj)
}

function event_init()
{
	$("#database_sel").change(function (){
		mysql.data_base_list(urlParamObj)
	})
}

window.index_monitor_init = function ()
{
    view_init()
}

function mysql_info_change(){
	var el_ul = $("#mysql_info_div").find("ul")
	el_ul.find("li").unbind("click")
	el_ul.find("li").removeClass("active")
	el_ul.find("li").eq(0).addClass("active")
	el_ul.find("li").click(function (){
		$(this).siblings().removeClass("active")
		$(this).addClass("active")
		if($(this).attr("data-action") == "thread_info_list"){
			$("#thread_info_div").show()
			$("#cache_info_div").hide()
			$("#count_info_div").hide()
			$("#page_info_div").hide()
			$("#lock_info_div").hide()
		}
		else if($(this).attr("data-action") == "cache_info_list"){
			$("#thread_info_div").hide()
			$("#cache_info_div").show()
			$("#count_info_div").hide()
			$("#page_info_div").hide()
			$("#lock_info_div").hide()
		}
		else if($(this).attr("data-action") == "count_info_list"){
			$("#thread_info_div").hide()
			$("#cache_info_div").hide()
			$("#count_info_div").show()
			$("#page_info_div").hide()
			$("#lock_info_div").hide()
		}
		else if($(this).attr("data-action") == "page_info_list"){
			$("#thread_info_div").hide()
			$("#cache_info_div").hide()
			$("#count_info_div").hide()
			$("#page_info_div").show()
			$("#lock_info_div").hide()
		}
		else{
			$("#thread_info_div").hide()
			$("#cache_info_div").hide()
			$("#count_info_div").hide()
			$("#page_info_div").hide()
			$("#lock_info_div").show()
			onWindowResize.execute()
		}
		mysql[$(this).attr("data-action")](urlParamObj)
	})

	el_ul.find("li").eq(0).click()
}



});

});

</script>